<template>
  <div>
    <div
        class="relative h-[400px] bg-cover bg-center"
        :style="{ backgroundImage: `url(${currentTheme.theme.bannerImage})` }"
    >
      <div class="absolute inset-0 bg-black bg-opacity-50"></div>
      <div class="container mx-auto px-4 h-full flex items-center relative">
        <div class="text-white max-w-2xl">
          <h1 class="text-4xl font-bold mb-4">{{ currentTheme.theme.title }}</h1>
          <p class="text-xl">{{ currentTheme.theme.subtitle }}</p>
        </div>
      </div>
    </div>

    <div class="container mx-auto px-4 py-12">
      <!-- 主题介绍 -->
      <div class="bg-white rounded-lg shadow-md p-6 mb-12">
        <h2 class="text-2xl font-bold mb-4">主题介绍</h2>
        <div class="prose max-w-none">
          <p class="text-gray-600">{{ currentTheme.theme.description }}</p>
        </div>
      </div>

      <!-- 推荐商品 -->
      <h2 class="text-2xl font-bold mb-6">主题商品</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <FlowerCard
            v-for="product in currentTheme.products"
            :key="product.id"
            :flower="product"
        />
      </div>

      <!-- 用户评价 -->
<!--      <div class="mt-12">-->
<!--        <div class="flex items-center justify-between mb-6">-->
<!--          <h2 class="text-2xl font-bold">购买评价</h2>-->
<!--          <router-link-->
<!--              :to="{ name: 'ThemeReviews', params: { id: route.params.id }}"-->
<!--              class="text-primary hover:text-primary-dark"-->
<!--          >-->
<!--            查看全部评价-->
<!--            <el-icon class="ml-1">-->
<!--              <ArrowRight/>-->
<!--            </el-icon>-->
<!--          </router-link>-->
<!--        </div>-->
<!--        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">-->
<!--          <div-->
<!--              v-for="review in currentTheme.reviews"-->
<!--              :key="review.id"-->
<!--              class="bg-white rounded-lg shadow-md p-6"-->
<!--          >-->
<!--            <div class="flex items-center justify-between mb-4">-->
<!--              <div class="flex items-center">-->
<!--                <img-->
<!--                    :src="review.avatar"-->
<!--                    :alt="review.name"-->
<!--                    class="w-12 h-12 rounded-full mr-4"-->
<!--                >-->
<!--                <div>-->
<!--                  <h4 class="font-bold">{{ review.name }}</h4>-->
<!--                  <div class="flex items-center space-x-2">-->
<!--                    <div class="flex text-yellow-400">-->
<!--                      <el-icon v-for="n in review.rating" :key="n">-->
<!--                        <Star/>-->
<!--                      </el-icon>-->
<!--                    </div>-->
<!--                    <span class="text-gray-400 text-sm">{{ review.createTime }}</span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->

<!--            <div class="bg-gray-50 rounded p-3 mb-4 text-sm text-gray-600">-->
<!--              <p class="mb-1">规格：{{ review.specs }}</p>-->
<!--              <p>配送：{{ review.delivery }}</p>-->
<!--            </div>-->

<!--            <p class="text-gray-600 mb-4">{{ review.content }}</p>-->

<!--            <div class="mt-4 flex flex-wrap gap-2 mb-4">-->
<!--              <div-->
<!--                  v-for="(img, index) in review.images"-->
<!--                  :key="index"-->
<!--                  class="relative group cursor-pointer overflow-hidden rounded-lg"-->
<!--                  @click="showImage(img, '购买实拍')"-->
<!--              >-->
<!--                <img-->
<!--                    :src="img"-->
<!--                    class="w-20 h-20 object-cover transition-transform duration-300 group-hover:scale-110"-->
<!--                >-->
<!--                <div-->
<!--                    class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-opacity duration-300 flex items-center justify-center">-->
<!--                  <el-icon class="text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300"-->
<!--                           :size="24">-->
<!--                    <ZoomIn/>-->
<!--                  </el-icon>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->

<!--            &lt;!&ndash; 商家回复 &ndash;&gt;-->
<!--            <div-->
<!--                v-if="review.reply"-->
<!--                class="bg-gray-50 rounded p-4 text-sm"-->
<!--            >-->
<!--              <p class="text-gray-600 font-medium mb-1">商家回复：</p>-->
<!--              <p class="text-gray-600">{{ review.reply.content }}</p>-->
<!--              <p class="text-gray-400 text-xs mt-2">{{ review.reply.time }}</p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>

    <!-- 图片预览对话框 -->
    <el-dialog
        v-model="showPreview"
        :title="previewTitle"
        width="80%"
        class="preview-dialog"
        :close-on-click-modal="true"
        :show-close="false"
    >
      <div class="relative">
        <img
            :src="previewImage"
            class="max-w-full max-h-[70vh] mx-auto rounded-lg shadow-xl"
        >
        <div class="absolute top-2 right-2">
          <el-button
              type="primary"
              circle
              @click="showPreview = false"
          >
            <el-icon>
              <Close/>
            </el-icon>
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {Star, ZoomIn, Close, ArrowRight} from '@element-plus/icons-vue'
import FlowerCard from '@/components/common/FlowerCard.vue'
import {getTheme} from "@/api/themes.js";

const route = useRoute()
const showPreview = ref(false)
const previewImage = ref('')
const previewTitle = ref('')
const currentTheme = ref({})
const initDetail = async () => {
  const {data} = await getTheme(route.params.id)
  currentTheme.value = data
  currentTheme.value.reviews = [
    {
      id: 1,
      name: '李女士',
      avatar: 'https://pic.nximg.cn/file/20221216/33102792_122033355109_2.jpg',
      rating: 5,
      content: '妈妈很喜欢这束花，包装很精美，花也很新鲜！康乃馨的颜色特别好看，搭配的满天星也恰到好处。送货小哥很贴心，提前打电话确认时间，还帮忙保密，给妈妈一个惊喜。',
      createTime: '2024-01-15 14:23',
      specs: '粉色康乃馨19支+满天星',
      delivery: '当天送达',
      images: [
        'https://pic.nximg.cn/file/20221216/33102792_122033355109_2.jpg',
        'https://pic.nximg.cn/file/20221216/33102792_122033355109_2.jpg'
      ],
      likes: 28,
      reply: {
        content: '感谢您的信任和支持！祝您和妈妈节日快乐~',
        time: '2024-01-15 15:00'
      }
    },
    {
      id: 2,
      name: '陈女士',
      avatar: 'https://pic.nximg.cn/file/20221216/33102792_122033355109_2.jpg',
      rating: 5,
      content: '第二次在这里买花了，一如既往的好。这次买的是康乃馨礼盒，做工非常精致，妈妈收到特别开心。花的品质很好，回家插了一周都很新鲜。',
      createTime: '2024-01-14 16:45',
      specs: '康乃馨礼盒装+尤加利叶',
      delivery: '次日送达',
      images: [
        'https://pic.nximg.cn/file/20221216/33102792_122033355109_2.jpg',
        'https://pic.nximg.cn/file/20221216/33102792_122033355109_2.jpg',
        'https://pic.nximg.cn/file/20221216/33102792_122033355109_2.jpg'
      ],
      likes: 15
    }
  ]
}
initDetail()
const showImage = (img, title = '') => {
  previewImage.value = img
  previewTitle.value = title
  showPreview.value = true
}
</script>

<style scoped>
.preview-dialog :deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

.preview-dialog :deep(.el-dialog__header) {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #e4e4e4;
}

.preview-dialog :deep(.el-dialog__body) {
  padding: 24px;
  background-color: #f5f5f5;
}

@media (max-width: 768px) {
  .preview-dialog :deep(.el-dialog) {
    width: 95% !important;
    margin: 0 auto;
  }
}
</style>
